<template>
  <div id="login">
      <div class="block lb">
          <el-carousel height="650px" autoplay>
            <el-carousel-item>
              <span class="demonstration">信息数据实时更新</span>
              <img src="@/public/login/lb-1.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
              <span class="demonstration">订单信息实时处理</span>
              <img src="@/public/login/lb-2.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
              <span class="demonstration">房型信息实时处理</span>
              <img src="@/public/login/lb-3.png" alt="">
            </el-carousel-item>
          </el-carousel>
      </div>
       <div class="form-box">
        <div class="form-content">
          <p class="form-title">
           <!-- 欢迎登录好客酒店商家管理平台 -->
           欢迎登录数字酒店管理系统
          </p>
          <el-input placeholder="请输入用户名" prefix-icon="iconfont  icon-user" size="large" clearable v-model="form.account" ref="userName"
           @keyup.enter.native="login" >
          </el-input>
          <el-input placeholder="请输入密码" prefix-icon="iconfont  icon-password" size="large" clearable type="password" class="password" v-model="form.password" @keyup.enter.native="login">
          </el-input>
          <p class="info">忘记密码请联系管理员</p>
          <div style="font-size:12px;padding-top:2px;color:#999">版本：{{version}}</div>
          <el-button type="primary" @click="login" class="login">登录</el-button>
        </div>
      </div>
  </div>
</template>

<script>
import base from "../config.js";
export default {
  name: "login",
  data() {
    return {
      form: {
        account: "",
        password: "",
        version: ""
      }
    };
  },
  mounted() {
    this.$refs["userName"].focus();
  },
  created() {
    this.$createElement;
    this.version = base.version;
    if (window.intervalClose) {
      clearInterval(window.intervalClose);
      window.notify_1.close();
      window.notify_2.close();
      window.notify_3.close();
    }
  },
  methods: {
    login() {
      const data = Object.assign({}, this.value, {
        account: this.form.account,
        password: this.form.password
      });
      this.$http.post("/system/user/login", data).then(res => {
        if (res.data.errCode === 0) {
          window.commo.token = res.data.suppliersToken.token;
          sessionStorage.setItem("token", res.data.suppliersToken.token);
          sessionStorage.setItem(
            "companyId",
            res.data.suppliersUserEntity.company
          );
          sessionStorage.setItem("modeName", res.data.modeName);
          sessionStorage.setItem(
            "accountEditId",
            res.data.suppliersToken.adminUserId
          );
          const fnData = JSON.stringify(res.data.suppliersRoleMenuEntities);
          // 将权限列表存入缓存 并且设置 store
          sessionStorage.setItem("Menu", fnData);
          this.$store.dispatch(
            "setAuthListAsyn",
            res.data.suppliersRoleMenuEntities
          );
          sessionStorage.setItem(
            "account",
            res.data.suppliersUserEntity.account
          );
          sessionStorage.setItem("name", res.data.suppliersUserEntity.name);  
          sessionStorage.setItem("userId", res.data.suppliersToken.adminUserId);
          sessionStorage.setItem(
            "isAdmin",
            res.data.suppliersUserEntity.isAdmin
          );
          const loginTime = JSON.stringify(res.data.loginInfoAll);
          sessionStorage.setItem("loginTime", loginTime);
          sessionStorage.setItem("initActive", "");
          this.$router.push("/index/home_page");
        } else {
          this.$message.error(res.data.errMsg);
        }
      });
    }
  }
};
</script>

<style lang="scss">
body {
  font-size: 14px;
  font-family: "微软雅黑";
}
#login {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../public/login/login-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  .lb {
    width: 941px;
    position: absolute;
    left: 5%;
    bottom: 10%;
    .demonstration {
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
      padding-bottom: 42px;
      text-align: center;
      display: block;
    }
    .el-carousel__indicator {
      padding-right: 30px;
    }
    .el-carousel__button {
      background: rgba(230, 230, 230, 1);
      height: 8px;
      border-radius: 4px;
      width: 24px;
    }
    .el-carousel__indicator.is-active button {
      background: rgba(109, 35, 119, 1);
    }
  }
  .form-box {
    position: absolute;
    z-index: 1111;
    width: 400px;
    height: 384px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    bottom: 20%;
    right: 5%;
    .form-content {
      width: 320px;
      margin: 0 auto;
      .form-title {
        padding: 30px 0 50px 0;
        font-size: 18px;
        color: rgba(109, 35, 119, 1);
        box-sizing: border-box;
      }
      .el-input__inner {
        height: 44px;
        font-size: 14px;
        padding-left: 40px;
        border-radius: 22px;
      }
      .el-input__inner:focus + .el-input__prefix > i {
        color: rgba(109, 35, 119, 1);
      }
      .el-input.is-active .el-input__inner,
      .el-input__inner:focus {
        border-color: rgba(109, 35, 119, 1);
      }
      .el-input__icon.iconfont {
        font-size: 20px;
        line-height: 44px;
        margin-left: 5px;
      }
      .password {
        margin-top: 40px;
      }
      .info {
        font-size: 16px;
        font-family: PingFang-SC-Regular;
        color: rgba(153, 153, 153, 1);
        padding-top: 20px;
      }
      .el-button--primary {
        height: 44px;
        font-size: 14px;
        width: 100%;
        margin-top: 20px;
        border-radius: 22px;
        background: rgba(109, 35, 119, 1);
        border: none;
      }
    }
  }
}
</style>
